import { useStore } from '@/store'
import ArticleItem from '../ArticleItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import styles from './index.module.scss'
import { observer } from 'mobx-react-lite'

type Props = {
  channelId: number
}

const ArticleList = ({ channelId }: Props) => {
  const { articleStore } = useStore()

  // 上拉加载 这个函数要求必须是一个Promise
  const loadMore = async () => {
    console.log('加载更多')
    // 获取下一页数据
    // 把已经加载数据和新数据列表做拼接处理
    await articleStore.getList(channelId)
  }

  // 下拉刷新
  const onRefresh = async () => {
    console.log('下拉刷新')
    await articleStore.refreshList(channelId)
  }

  return (
    <div className={styles.root}>
      <PullToRefresh onRefresh={onRefresh}>
        {/* 文章列表中的每一项 */}
        <div className="article-item">
          {articleStore.articleData.results.map((article, index) => {
            return (
              <ArticleItem
                key={article.art_id}
                type={article.cover.type}
                articleData={article}
              />
            )
          })}
        </div>
        {/* 加载更多 */}
        <InfiniteScroll loadMore={loadMore} hasMore={articleStore.hasMore} />
      </PullToRefresh>
    </div>
  )
}

export default observer(ArticleList)
